{% extends "base.html" %}
{% load i18n %}
{% load webdesign %}

{% block app_css %}
  <link type="text/css" rel="StyleSheet" href="/static/css/redmond/jquery-ui-1.7.2.custom.css" />
  <link rel="stylesheet" type="text/css" href="/static/css/my_space.css" />
{% endblock %}
{% block app_js %}
  <script type="text/javascript" src="/static/js/jquery-ui-1.7.2.custom.min.js"></script>
  <script type="text/javascript" src="/static/js/my_space.js"></script>
{% endblock %}
 
{% block container %}
  <div id="post_note">
    <IMG src="{{ user.avatar_link }}" width="140" height="140" align="left" border="0">
    <form>
      <span class="char-hint"></span>
      <span>{% trans "Post note here" %}:</span>
      <textarea class="very-input" name="content" cols="65" rows="4"></textarea>
      <input type="submit" class="submit" value="{% trans 'submit' %}">
    </form>
  </div>
  <div id = "my_fans_friends">
      <div id="my_fans">
        <img src="/static/images/friend.gif" />
        <a href="/member/my_fans/">Fans
        {% if fans_request_num %}
        : <strong>{{ fans_request_num }}</strong>
        {%endif %}
        </a>
      </div>
      <div id="my_friends">
        <img src="/static/images/friend.gif" />
        <a href="/member/my_friends/">Friends
        {% if friends_request_num %}
        : <strong>{{ friends_request_num }}</strong>
        {% endif %}
        </a>
      </div>
  </div>
  <div id="playground">
    <input type="hidden" id="max_id"/>
    <ul>
      <li><a href="#me_fellows" id="me_fellows_tab">{% trans "me&fellows" %}</a></li>
      <li><a href="#around_me" id="around_me_tab">{% trans "around me" %}</a></li>
      <li><a href="#nearby_people" id="nearby_people_tab">{% trans "nearby people"%}</a></li>
      <li><a href="#universal" id="universal_tab">{% trans "universal" %}</a></li>
    </ul>
    <div id="me_fellows" class="tab">
      <div class="subheader">
        <div class="filter">
          <label for="filter">{% trans 'filter by' %}</label>
          <select>
            <option>{% trans 'all' %}</option>
            <option>{% trans 'friends' %}</option>
            <option>{% trans 'me' %}</option>      
          </select>
        </div>
        <div class="search">
        {% trans 'search here' %}:<input />
        </div>
      </div>
      <div class="notes">
      </div>
      <input class="load_more" type="button" value="{% trans 'load more' %}" />
    </div>
    <div id="around_me" class="tab">
      <div class="notes">
      </div>
    </div>
    <div id="nearby_people" class="tab">
    </div>
    <div id="universal" class="tab">
      <div class="notes">
      </div>
      <input class="load_more" type="button" value="{% trans 'load more' %}" />
    </div>
  </div>
  <div id="status">{% lorem 1 p %}</div>
  <div id="tools">{% lorem 1 p %}</div>
  <div id="people_visit_me">{% lorem 1 p %}</div>
  {% include "misc/mini_note.html" %}
{% endblock %}
